<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('货位一览')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        * {
            margin: 0;
            padding: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
        .container-div {
            padding: 5px;
            position: relative;
        }
        .headerBox {
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        .el-divider--vertical {
            width: 2px!important;
            height: 25px!important;
            margin: 0 20px!important;
        }
        .tag {
            width: 100px;
            height: 40px;
            color: #000000;
            text-align: center;
            line-height: 40px;
            border-radius: 8px;
            font-size: 16px;
            margin-right: 10px;
        }
        .notHave {
            background: #d3d3d3;
        }
        .have {
            background: #748ede;
        }
        .lockCell {
            background: #A52A2A!important;
        }
        .arrowMarkIn {
            position: absolute;
            top: 68px;
            left: 50px;
            background: #FFA500;
        }
        #seat {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 70px;
        }
        .arrowMarkOut {
            position: absolute;
            top: 68px;
            right: 5px;
            background: #FFA500;
        }
        .main {
            width: 100%;
            margin-top: 50px;
            padding: 0 8px;
        }
        .badgeBox {
            width: 100%;
            height: 35px;
        }
        .badgeRight {
            width: calc(100% - 35px);
            height: 100%;
            float: right;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .badgeItem {
            width: calc(100% / 44);
            height: 100%;
        }
        .badgeItemNum {
            width: 28px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            background: #E9967A;
            color: #000;
            font-size: 18px;
            border-radius: 50%;
        }
        .cellPai {
            width: 100%;
            height: 120px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .center {
            text-align: center;
            white-space: nowrap;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .shelfName {
            width: 25px;
            height: 110px;
            color: black;
            background: #B3C0D1;
            border-radius: 5px;
            font-size: 15px;
        }
        .shelfBox {
            width: calc(100% - 35px);
            height: 70px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .cellBox {
            width: calc(100% / 44);
            height: 100%;
            text-align: center;
            line-height: 70px;
            outline: 1px solid #EBEEF5;
        }
        .borderNone {
            outline: none!important;
        }
        .el-input.is-disabled .el-input__inner {
            width: 200px!important;
            color: #000000!important;
        }
        .tableBox {
            position: absolute;
            width: 45%;
            height: 291px;
            bottom: 60px;
            right: 50px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
            z-index: 5;
        }
    </style>
</head>
<body>
<div class="container-div">
    <!-- 顶栏容器 -->
    <div class="headerBox">
        <!-- 楼层选择 -->
        <i class="fa fa-hand-o-right fa-2x" style="color: #409EFF;margin-right: 10px"></i>
        <el-button v-for="(item, index) in floorList" :key="index" :plain="checkFloorId != item.id" type="primary" @click="getFloorId(item.id)" v-cloak>
            {{item.text}}层
        </el-button>
        <!-- 分割线 -->
        <el-divider direction="vertical"></el-divider>
        <!-- 货位状态 -->
        <span v-for="(item, index) in statusList" :key="index" class="tag" :class="item.colorClass" v-cloak>{{item.stateText}}</span>
        <span class="tag lockCell"><i class="fa fa-close"></i> 封禁</span>
    </div>
    <!-- 入库方向 -->
    <div class="tag arrowMarkIn"><i class="fa fa-arrow-right"></i> 入库方向</div>
    <!-- hover显示货位位置 -->
    <el-tag id="seat" effect="dark" v-show="seatState" v-cloak>{{location}}</el-tag>
    <!-- 出库方向 -->
    <div class="tag arrowMarkOut">出库方向 <i class="fa fa-arrow-right"></i></div>
    <!-- 显示货位区域 -->
    <div class="main">
        <!-- 长缓存线标记 -->
        <div class="badgeBox">
            <div class="badgeRight">
                <div class="badgeItem center" v-for="(item, index) in longBadgeList" :key="index">
                    <div class="badgeItemNum">{{item}}</div>
                </div>
            </div>
        </div>
        <!-- HC-A线 -->
        <div class="cellPai">
            <div class="center shelfName">H<br>C<br>|<br>A<br>{{checkFloorId}}</div>
            <div class="shelfBox">
                <div class="cellBox" v-for="(item, index) in cellListA" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'have' : '', item.state == 3 ? 'have' : '', item.lock == 2 ? 'lockCell' : '']">
                    <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
                </div>
            </div>
        </div>
        <!-- HC-B线 -->
        <div class="cellPai">
            <div class="center shelfName">H<br>C<br>|<br>B<br>{{checkFloorId}}</div>
            <div class="shelfBox">
                <div class="cellBox" v-for="(item, index) in cellListB" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'have' : '', item.state == 3 ? 'have' : '', item.lock == 2 ? 'lockCell' : '']">
                    <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
                </div>
            </div>
        </div>
        <!-- HC-C线 -->
        <div class="cellPai">
            <div class="center shelfName">H<br>C<br>|<br>C<br>{{checkFloorId}}</div>
            <div class="shelfBox">
                <div class="cellBox" v-for="(item, index) in cellListC" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'have' : '', item.state == 3 ? 'have' : '', item.lock == 2 ? 'lockCell' : '']">
                    <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
                </div>
            </div>
        </div>
        <!-- HC-D线 -->
        <div class="cellPai" style="margin-top: 55px">
            <div class="center shelfName">H<br>C<br>|<br>D<br>{{checkFloorId}}</div>
            <div class="shelfBox">
                <div class="cellBox" v-for="(item, index) in cellListD" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'have' : '', item.state == 3 ? 'have' : '', item.lock == 2 ? 'lockCell' : '']">
                    <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
                </div>
                <div class="cellBox borderNone" v-for="(item, index) in replenish" :key="index"></div>
            </div>
        </div>
        <!-- HC-E线 -->
        <div class="cellPai">
            <div class="center shelfName">H<br>C<br>|<br>E<br>{{checkFloorId}}</div>
            <div class="shelfBox">
                <div class="cellBox" v-for="(item, index) in cellListE" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'have' : '', item.state == 3 ? 'have' : '', item.lock == 2 ? 'lockCell' : '']">
                    <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
                </div>
                <div class="cellBox borderNone" v-for="(item, index) in replenish" :key="index"></div>
            </div>
        </div>
        <!-- 短缓存线标记 -->
        <div class="badgeBox">
            <div class="badgeRight">
                <div class="badgeItem center" v-for="(item, index) in shortBadgeList" :key="index">
                    <div class="badgeItemNum">{{item}}</div>
                </div>
                <div class="badgeItem borderNone" v-for="(item, index) in replenish" :key="index"></div>
            </div>
        </div>
    </div>
    <!-- 货位详情弹出框 -->
    <el-dialog title="货位详情" width="400px" :visible.sync="showMsgState" append-to-body="true">
        <el-row>
            <el-form :inline="true" label-width="100px" :model="msgInfo" class="demo-ruleForm">
                <el-form-item size="small" label="货位编码:">
                    <el-input v-model="msgInfo.cellCode" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="货位描述:">
                    <el-input v-model="msgInfo.memo" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="货位状态:">
                    <el-input v-model="msgInfo.stateText" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="封禁状态:">
                    <el-input v-model="msgInfo.lockText" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="单晶编号:" v-if="msgInfo.materialId">
                    <el-input v-model="msgInfo.materialId" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="物料编码:" v-if="msgInfo.materialProduct">
                    <el-input v-model="msgInfo.materialProduct" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="单晶规格:" v-if="msgInfo.specId">
                    <el-input v-model="msgInfo.specId" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="客户等级:" v-if="msgInfo.materialCategory">
                    <el-input v-model="msgInfo.materialCategory" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="单晶PN型:" v-if="msgInfo.materialPN">
                    <el-input v-model="msgInfo.materialPN" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="拼棒类型:" v-if="msgInfo.assemblyType">
                    <el-input v-model="msgInfo.assemblyText" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="电阻率:" v-if="msgInfo.resistance">
                    <el-input v-model="msgInfo.resistance" disabled="true"></el-input>
                </el-form-item>
            </el-form>
        </el-row>
    </el-dialog>
    <!-- 利用率表格 -->
    <div class="tableBox">
        <el-table :data="tableData" border stripe height="291" style="width: 100%">
            <el-table-column prop="name" label="缓存线" align="center"></el-table-column>
            <el-table-column prop="sum" label="货位总数" align="center"></el-table-column>
            <el-table-column prop="use" label="满货位" align="center"></el-table-column>
            <el-table-column prop="vacancy" label="空货位" align="center"></el-table-column>
            <el-table-column prop="rate" label="货位利用率" align="center"></el-table-column>
        </el-table>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/echarts/echarts.js}"></script>
<script th:inline="javascript">
    var vue = new Vue({
        el: '.container-div',
        data: {
            //楼层列表
            floorList: [
                {id: '2', text: '二'},
                {id: '3', text: '三'},
                {id: '4', text: '四'},
                {id: '5', text: '五'},
                {id: '6', text: '六'}
            ],
            //选择的楼层id
            checkFloorId: '2',
            //货位状态列表
            statusList: [
                {colorClass: 'notHave', stateText: '无货'},
                {colorClass: 'have', stateText: '有货'}
            ],
            //hover显示货位位置信息状态
            seatState: false,
            //hover显示货位位置信息
            location: '',
            //长缓存线标记
            longBadgeList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26',
                '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44'],
            //每层各缓存线对应的货位列表
            cellListA: [],
            cellListB: [],
            cellListC: [],
            cellListD: [],
            cellListE: [],
            //D线、E线补齐44货位
            replenish: ['18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42',
                '43', '44'],
            //短缓存线标记
            shortBadgeList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17'],
            //货位详情弹出框状态
            showMsgState: false,
            //货位详情弹出框信息
            msgInfo: {},
            //利用率表格数据
            tableData: []
        },
        methods: {
            //获取楼层id
            getFloorId(id){
                this.checkFloorId = id;
                this.getMsg(id);
            },
            //获取货位信息
            getMsg(id){
                var that = this;
                that.cellListA = [];
                that.cellListB = [];
                that.cellListC = [];
                that.cellListD = [];
                that.cellListE = [];
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/cellInfo/findByCellInfoDto",
                    data: {
                        sFloor: id
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        var list = data.rows;
                        for(var i = 0; i < list.length; i++){
                            if(list[i].sPai == 1){
                                that.cellListA.push(list[i]);
                            }else if(list[i].sPai == 2){
                                that.cellListB.push(list[i]);
                            }else if(list[i].sPai == 3){
                                that.cellListC.push(list[i]);
                            }else if(list[i].sPai == 4){
                                that.cellListD.push(list[i]);
                            }else if(list[i].sPai == 5){
                                that.cellListE.push(list[i]);
                            }
                        }
                    }
                });
            },
            //hover显示某个货位位置
            showSeat(e){
                this.location = '';
                if(e){
                    this.seatState = true;
                    this.location = e;
                }else{
                    this.seatState = false;
                }
            },
            //显示某个货位信息
            showMsg(e){
                this.showMsgState = true;
                this.msgInfo = e;
                if(this.msgInfo.state == 0){
                    this.msgInfo.stateText = "无货";
                }else if(this.msgInfo.state == 1 || this.msgInfo.state == 2 || this.msgInfo.state == 3){
                    this.msgInfo.stateText = "有货";
                }else if(this.msgInfo.state == 4){
                    this.msgInfo.stateText = "故障";
                }else if(this.msgInfo.state == 8){
                    this.msgInfo.stateText = "禁用";
                }else{
                    this.msgInfo.stateText = "盘点";
                }
                if(this.msgInfo.lock == 1){
                    this.msgInfo.lockText = "正常";
                }else if(this.msgInfo.lock == 2){
                    this.msgInfo.lockText = "封禁";
                }
                if(this.msgInfo.assemblyType == 1){
                    this.msgInfo.assemblyText = "整棒";
                }else if(this.msgInfo.assemblyType == 2){
                    this.msgInfo.assemblyText = "二拼";
                }else if(this.msgInfo.assemblyType == 3){
                    this.msgInfo.assemblyText = "三拼";
                }
            },
            //获取利用率表格数据
            getTableData(){
                var haveA = 0;
                for(var i = 0; i < this.cellListA.length; i++){
                    if(this.cellListA[i].state != 0 && this.cellListA[i].state != 4 && this.cellListA[i].state != 8){
                        haveA += 1;
                    }
                }
                var numA = parseFloat((haveA*100)/44).toFixed(2);
                if(numA == '0.00'){
                    numA = '0%';
                }else if(numA == '100.00'){
                    numA = '100%';
                }else{
                    numA = numA + '%';
                }
                var notHaveA = parseInt(44 - haveA);
                var haveB = 0;
                for(var j = 0; j < this.cellListB.length; j++){
                    if(this.cellListB[j].state != 0 && this.cellListB[j].state != 4 && this.cellListB[j].state != 8){
                        haveB += 1;
                    }
                }
                var numB = parseFloat((haveB*100)/44).toFixed(2);
                if(numB == '0.00'){
                    numB = '0%';
                }else if(numB == '100.00'){
                    numB = '100%';
                }else{
                    numB = numB + '%';
                }
                var notHaveB = parseInt(44 - haveB);
                var haveC = 0;
                for(var x = 0; x < this.cellListC.length; x++){
                    if(this.cellListC[x].state != 0 && this.cellListC[x].state != 4 && this.cellListC[x].state != 8){
                        haveC += 1;
                    }
                }
                var numC = parseFloat((haveC*100)/44).toFixed(2);
                if(numC == '0.00'){
                    numC = '0%';
                }else if(numC == '100.00'){
                    numC = '100%';
                }else{
                    numC = numC + '%';
                }
                var notHaveC = parseInt(44 - haveC);
                var haveD = 0;
                for(var y = 0; y < this.cellListD.length; y++){
                    if(this.cellListD[y].state != 0 && this.cellListD[y].state != 4 && this.cellListD[y].state != 8){
                        haveD += 1;
                    }
                }
                var numD = parseFloat((haveD*100)/17).toFixed(2);
                if(numD == '0.00'){
                    numD = '0%';
                }else if(numD == '100.00'){
                    numD = '100%';
                }else{
                    numD = numD + '%';
                }
                var notHaveD = parseInt(17 - haveD);
                var haveE = 0;
                for(var z = 0; z < this.cellListE.length; z++){
                    if(this.cellListE[z].state != 0 && this.cellListE[z].state != 4 && this.cellListE[z].state != 8){
                        haveE += 1;
                    }
                }
                var numE = parseFloat((haveE*100)/17).toFixed(2);
                if(numE == '0.00'){
                    numE = '0%';
                }else if(numE == '100.00'){
                    numE = '100%';
                }else{
                    numE = numE + '%';
                }
                var notHaveE = parseInt(17 - haveE);
                this.tableData = [
                    {name: 'HC-A' + this.checkFloorId, sum: '44', use: haveA, vacancy: notHaveA, rate: numA},
                    {name: 'HC-B' + this.checkFloorId, sum: '44', use: haveB, vacancy: notHaveB, rate: numB},
                    {name: 'HC-C' + this.checkFloorId, sum: '44', use: haveC, vacancy: notHaveC, rate: numC},
                    {name: 'HC-D' + this.checkFloorId, sum: '17', use: haveD, vacancy: notHaveD, rate: numD},
                    {name: 'HC-E' + this.checkFloorId, sum: '17', use: haveE, vacancy: notHaveE, rate: numE}
                ]
            }
        },
        created(){
            this.getMsg(this.checkFloorId);
        },
        mounted(){
            this.getTableData();
        },
        watch: {
            'checkFloorId': {
                handler: function(){
                    this.getTableData();
                }
            }
        }
    })
</script>
</body>
</html>
